<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
		<meta name="keywords" content="ajax,jquery,省市联动" />
		<meta name="description" content="ijquery演示平台，演示XHTML、CSS、jquery、PHP案例和示例" />
		<title>第74款插件：jquery.cityselect.js基于jQuery+JSON的省市联动效果</title>
		<link rel="stylesheet" type="text/css" href="css/main.css" />
		<style type="text/css">
			.demo{width:80%; margin:20px auto}
			.demo h3{height:32px; line-height:32px}
			.demo p{line-height:24px}
			pre{margin-top:10px; padding:6px; background:#f7f7f7}
		</style>
		<script type="text/javascript" src="js/jquery.js"></script>
		<script type="text/javascript" src="js/jquery.cityselect.js"></script>
		<script type="text/javascript">
			$(function(){
				$("#city_1").citySelect({
					nodata:"none",
					required:false
				}); 
				$("#city_2").citySelect({
					prov:"北京",
					nodata:"none"
				});
				
				$("#city_3").citySelect({
					prov:"湖南", 
					city:"长沙"
				});
				$("#city_4").citySelect({
					prov:"湖南", 
					city:"长沙",
					dist:"岳麓区",
					nodata:"none"
				}); 
				
				$("#city_5").citySelect({
					url:{"citylist":[
						{"p":"前端技术","c":[{"n":"HTML"},{"n":"CSS","a":[{"s":"CSS2.0"},{"s":"CSS3.0"}]},{"n":"JAVASCIPT"}]},
						{"p":"编程语言","c":[{"n":"C"},{"n":"C++"},{"n":"Objective-C"},{"n":"PHP"},{"n":"JAVA"}]},
						{"p":"数据库","c":[{"n":"Mysql"},{"n":"SqlServer"},{"n":"Oracle"},{"n":"DB2"}]},
					]},
					prov:"",
					city:"",
					dist:"",
					nodata:"none"
				});
			});
		</script>
	</head>
	
	<body>
		<div id="main">
			<h2 class="top_title"><a href="http://www.ijquery.cn">第74款插件：jquery.cityselect.js基于jQuery+JSON的省市联动效果</a></h2>
			<div class="demo">
				<h3>直接调用</h3>
				<p>二级联动，默认选项为：请选择</p>
				<div id="city_1">
					<select class="prov"></select> 
					<select class="city" disabled="disabled"></select>
				</div>
				<p>三级联动，默认省份：北京，隐藏无数据的子级select</p>
				<div id="city_2">
					<select class="prov"></select> 
					<select class="city" disabled="disabled"></select>
					<select class="dist" disabled="disabled"></select>
				</div>
				<pre>
					$("#city_1").citySelect({nodata:"none",required:false}); 
					$("#city_2").citySelect({prov:"北京",nodata:"none"});
				</pre>
			</div>
			
			<div class="demo">
				<h3>设置省份、城市、地区（县）的默认值</h3>
				<p>二级联动</p>
				<div id="city_3">
					<select class="prov"></select> 
					<select class="city" disabled="disabled"></select>
				</div>
				<p>三级联动</p>
				<div id="city_4">
					<select class="prov"></select> 
					<select class="city" disabled="disabled"></select>
					<select class="dist" disabled="disabled"></select>
				</div>
				<pre>
					$("#city_3").citySelect({prov:"湖南", city:"长沙"});
					$("#city_4").citySelect({prov:"湖南", city:"长沙", dist:"岳麓区"}); 
				</pre>
			</div>
			
			<div class="demo">
				<h3>自定义下拉选项</h3>
				<div id="city_5">
					<select class="prov"></select>
					<select class="city" disabled="disabled"></select>
					<select class="dist" disabled="disabled"></select>
				</div>
				<pre>
					$("#city_5").citySelect({
					url:{"citylist":[
					{"p":"前端技术","c":[{"n":"HTML"},{"n":"CSS","a":[{"s":"CSS2.0"},{"s":"CSS3.0"}]},{"n":"JAVASCIPT"}]},
					{"p":"编程语言","c":[{"n":"C"},{"n":"C++"},{"n":"Objective-C"},{"n":"PHP"},{"n":"JAVA"}]},
					{"p":"数据库","c":[{"n":"Mysql"},{"n":"SqlServer"},{"n":"Oracle"},{"n":"DB2"}]},
					]},
					prov:"",
					city:"",
					dist:"",
					nodata:"none"
					});
				</pre>
			</div>
			<div class="ad_76090"><script src="/js/ad_js/bd_76090.js" type="text/javascript"></script></div>
			<br />
			<br />
			
		</div>
		<div id="footer">
			<p>Powered by ijquery.cn  允许转载、修改和使用本站的DEMO，但请注明出处：<a href="http://www.ijquery.cn">www.ijquery.cn</a></p>
		</div>
	</body>
</html>
